<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统布局</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <script src="../layui/layui.js"></script>

    <!-- row代表一行 col代表一列 栅格为12列 自适应体现在浏览器的大小 从左往右依次转变 -->
    <!-- layui-col-space10是作用在列中内容的 不是作用在列上的 -->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg6 layui-col-md4 layui-col-sm10">
            <div style="height: 100px; background-color: red">左边</div>
        </div>
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm2" >
            <div style="height: 100px; background-color: blue">右边</div>
        </div>
    </div>
</body>
</html>